<template>
    <div class="wrapper">
        <temp :text="hi"></temp>
        <div @click="jump" style="background-color: red ;width: 750px ;height: 100px;flex-direction: row">
            <shownav style="width: 200px;height: 100px;background-color:yellowgreen" name="hello Native" :age="age">
                <text style="color: black" >"age = {{age}}" </text>
            </shownav>

            <div style="width: 100px;height: 100px;background-color: #0088fb" @click="changeage"></div>
            <div style="width: 100px;height: 100px;background-color: darkred" @click="goNewpage"></div>
        </div>
        <image :src="logo" class="logo" @load="onImageLoad"/>
        <text class="greeting">The {{currentStr}} is ready!</text>
        <!--<router-view style="width: 300px ;height: 50px;background-color: #afddff"></router-view>-->

        <div>
            <showme style="width: 750px;height: 400px;background-color: #717171"
                    @mapLoaded="onMapLoaded"></showme>

        </div>
        <div class="bar">
            <div class="line">
            </div>
            <div class="barCon">
                <div class="baritem" v-for="item in barArr " @click="clickMe">
                    <image class="barimg" :src=item.img></image>
                    <text class="bartext">{{item.name}}</text>
                </div>
            </div>

        </div>

    </div>
</template>

<script>
  import temp from "./components/temp"

  const globalEvent = weex.requireModule('globalEvent');

  const HelloWeex = weex.requireModule("HelloWeex");
  const modal = weex.requireModule("modal")
  // globalEvent.

  export default {
    name: 'part',
    data() {
      return {
        logo: "http://wx4.sinaimg.cn/mw690/624fce0dgy1fxeyrspl8ij20dw08gwew.jpg" ,
        hi: "hello welcome",
        currentStr: '123321',
        age:0,
        barArr: [{
          img: "src/img/tab/home@2x.png",
          name: "首页",
          selImg: "src/img/tab/home-o@2x.png"
        }, {
          img: "src/img/tab/purchase@2x.png",
          name: "选购",
          selImg: "src/img/tab/purchase-o@2x.png"
        }, {
          img: "src/img/tab/cart@2x.png",
          name: "购物车",
          selImg: "src/img/tab/cart-o@2x.png"
        }, {
          img: "src/img/tab/mine@2x.png",
          name: "我的",
          selImg: "src/img/tab/mine-o@2x.png"
        },]
      }
    },
    methods: {
      goNewpage(){

        console.log(111);
        this.$router.push({path:'/hello'})
        console.log(222);

        // if ( Object.keys(HelloWeex).length === 0 ){
        //   this.$router.push({path:'/hello'})
        //
        // } else {
        //   this.$router.push({path:'/hello'})
        // }
        // goNewpage

      },
      changehi(){
        console.log('444444');
        this.hi = "hi from native";
        console.log('5555');

      },
      jump() {
        console.log("123321");
        this.$router.push('/hello');
      },
      clickMe() {
        this.currentStr = 123 + Math.random() * 100 + "";

        console.log(this.currentStr);

        HelloWeex.show("from Weex", function (ret) {

          modal.toast({message: ret.result})
          let str = ret.result;
          this.currentStr = str;
        })
      },
      onMapLoaded(e) {
        modal.toast({message: "is onMapLoaded" + JSON.stringify(e)});
      },
      changeage(){
        this.age ++;
      },
      osfire(){
        this.age = this.age + 10
      },
      onImageLoad(e){
        console.log("1236-----66321");
        console.log( e.success);
        console.log( e.size );
      },
      onfire(e){

      }


    },
    components: {
      temp: temp
    },
    mounted: function () {
      let  self = this;
      globalEvent.addEventListener('hello', function (e) {
        self.changehi();
      });
      self.addEventListener('onOCFire',function (e) {
        console.log(3211234567)
        self.onfire(e);
        console.log(7654321)
      })
    },
  }
</script>

<style scoped>
    .wrapper {
        justify-content: center;
        align-items: center;
    }

    .logo {
        width: 424px;
        height: 200px;
    }

    .greeting {
        text-align: center;
        margin-top: 70px;
        font-size: 50px;
        color: #41B883;
    }

    .message {
        margin: 30px;
        font-size: 32px;
        color: #727272;
        text-align: center;
    }

    .bar {
        background-color: white;
        left: 0px;
        bottom: 0px;
        right: 0px;
        height: 98px;
        width: 750px;
        position: absolute;
    }

    .barCon {
        flex-direction: row;
        background-color: white;
        left: 0px;
        bottom: 0px;
        right: 0px;
        height: 98px;
        width: 750px;
    }

    .line {
        left: 0px;
        right: 0px;
        height: 1px;
        background-color: red;
    }

    .baritem {
        width: 187.5px;
        height: 97px;
        background-color: white;
        left: 0px;
        align-items: center;
    }

    .barimg {
        top: 10px;
        width: 40px;
        height: 40px;
        text-align: center;
    }

    .bartext {
        text-align: center;
        top: 15px;
        font-size: 30px;
    }
</style>
